<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        async 异步函数
        ① 修改函数的默认返回值为：new Promise
        ② 可以使用 return 给 then 回调函数传递参数
        ③ 给 await 提供运行环境

        await 运算符 一元
        ① 只能运行在 async 的函数中
        ② 可以对任何数据类型进行运算
        ③ 对Promise对象进行运算，返回值是 resolve 的参数，其他数据类型原值返回
        ④ await 运算获取结果，是异步获取，等待 resolve 的执行。
        ⑤ await 后续代码都是微任务异步代码
        await在等什么
        ① resolve 执行
        ② 前一个 await 执行结束

        catch 返回值

        ① catch 返回前一个 Promise 对象，返回调用它的 promise 对象
        ② then 每次返回一个 promise 新对象

        async / await 解决回调地狱问题
        ① 将所有异步使用 promise 封装
        ② 使用 await 语法排列计算每一个 promise 对象，await 特性使得我计算结果输出顺序和代码位置顺序是一致的。
      */

      const p1 = new Promise((resolove) => {
        setTimeout(() => {
          resolove(1);
        }, Math.random() * 1000);
      });

      const p2 = new Promise((resolove) => {
        setTimeout(() => {
          resolove(2);
        }, Math.random() * 1000);
      });

      const p3 = new Promise((resolove) => {
        setTimeout(() => {
          resolove(3);
        }, Math.random() * 1000);
      });
      async function fn() {
        console.log(await p3);
        console.log(await p1);
        console.log(await p2);
      }
      fn();
    </script>
  </body>
</html>
